<template>
  <div class="storages-cconainer">
        <div class="wy-main-title wy-m-t-20 container-1200">
            <p> <nuxt-link :to="`./../../index`">首页</nuxt-link>  /  物流信息服务  /  <span>{{names}}</span></p>
        </div>
        <!-- 仓储搜索框 -->
        <div class="storage-city" v-if="type1 || type0">
            <a-row class="storage-city-content container-1200">
                <a-col :span='6' class='s-place-190 storang'>
                    <a-form-item label="仓储类型:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }" style="height: 40px">
                        <a-select placeholder="不限" class="s-place-190" style="width: 190px; height:40px">
                          <a-select-option value="常温仓">常温仓</a-select-option>
                          <a-select-option value="无人仓">无人仓</a-select-option>
                          <a-select-option value="冻库">冻库</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="所在地区:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                        <a-input  placeholder="请选择城市" :value="destinationCar" readOnly @click="magSvgShowMap('destinationCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='6' class='s-place-140'>
                      <a-form-item label="仓储名称:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                        <a-input  placeholder="请输入仓储名称"/>
                      </a-form-item>
                </a-col>
                <a-col :span='5' style="float:right ">
                    <a-button type="primary" :span='2' style='margin:0 20px 0 45px;' class='ant-btn-primary'>搜索</a-button>
                    <a-button :span='2'>重置</a-button>
                </a-col>
            </a-row>
        </div>
         <div class="storage-city" v-if="type2">
            <a-row class="storage-city-content container-1200">
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="所在地区:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                        <a-input  placeholder="请选择城市" :value="destinationCar" readOnly @click="magSvgShowMap('destinationCar')"/>
                    </a-form-item>
                </a-col>
                <a-col :span='6' class='s-place-140'>
                      <a-form-item label="网点名称:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                        <a-input  placeholder="请输入网点名称"/>
                      </a-form-item>
                </a-col>
                <a-col :span='5' style="float:right ">
                    <a-button type="primary" :span='2' style='margin:0 20px 0 45px;' class='ant-btn-primary'>搜索</a-button>
                    <a-button :span='2'>重置</a-button>
                </a-col>
            </a-row>
        </div>


         
          <!-- 仓储信息 -->
          <div class="storage-information-box container-1200">
        <a-tabs @change="changeTab">
           <a-tab-pane tab="物流仓储" key="1" >
   <!--              <div class="storage-title">
                    <span></span>
                    <span>仓储信息</span>
                </div> -->
                <!-- 仓储信息切换 -->
                <!-- <a-tabs defaultActiveKey="" @change="tabChange">
                  <a-tab-pane tab="全部" key=""></a-tab-pane>
                  <a-tab-pane tab="常温仓" key="常温仓"></a-tab-pane>
                  <a-tab-pane tab="立即仓" key="立即仓"></a-tab-pane>
                  <a-tab-pane tab="无人仓" key="无人仓"></a-tab-pane>
                  <a-tab-pane tab="冷冻仓" key="冷冻仓"></a-tab-pane>
                </a-tabs> -->
                <!-- 切换的内容 -->
                  <div class="storage-list">
                      <div class="storage-list-title">
                          <ul>
                            <li>仓储信息</li>
                            <li>发布者</li>
                            <li>查看</li>
                          </ul>
                      </div>
                  </div>
                <div class="information-change">
                      <!-- 左边的图片 -->
                      <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
                        <a-list-item  v-if="tabKey==''||tabKey==item.type" slot="renderItem" slot-scope="item, index" key="item.title">
                          <a-row>
                            <a-col :span='12'>
                              <div class="storage-img">
                                <img v-lazy="item.imgUrl">
                              </div>
                              <div class="storage-img-detail" style="margin-top:0px">
                                    <a slot="title">
                                      {{item.title}}
                                    </a>
                                    <p>仓储类型：{{item.type}}</p>
                                    <p>仓储面积：{{item.measure}}</p>
                                    <p>出租价格：{{item.rentalrates}}</p>
                                    <p class="wy-text-nowrap">仓储地址：{{item.address}}</p> 
                               </div>
                            </a-col>
                            <a-col :span='8'>
                                <div class="storage-company">
                                    <a slot="title">
                                      <span class="wy-font-18">{{item.company}}</span>
                                      <i class="recomend">推荐</i>
                                    </a>
                                    <div class="useStar">
                                          <span> 用户星级</span>
                                          <a-rate :defaultValue="2.5" disabled allowHalf />
                                          <div class="attestaion">已认证</div>
                                    </div>
                                 </div>
                            </a-col>
                            <a-col :span='4' class=" wy-p-l-15">
                                <a-button v-if="loggedIn" class='wy-m-b-15 wy-m-t--10' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                                <router-link v-if="!loggedIn" to="/login"><a-button  class='wy-m-b-15 wy-m-t--10' type="primary">立即沟通</a-button></router-link>
                                <router-link class="wy-m-b-15" :to="{path: '/info/storage/01',query:{ids: '01',id:`${item.id}`}}">
                                    <a-button>查看详情</a-button>
                                </router-link>
                                <p class="v-box-time">{{item.dataTime}}</p>
                            </a-col>
                          </a-row>
                        </a-list-item>
                      </a-list>  
                </div>
                    </a-tab-pane>
        <a-tab-pane tab="物流网点" key="2" >
                  <div class="storage-list">
                      <div class="storage-list-title">
                          <ul>
                            <li>网点信息</li>
                            <li>发布者</li>
                            <li>查看</li>
                          </ul>
                      </div>
                  </div>
                <!-- 切换的内容 -->
                <div class="information-change">
                      <!-- 左边的图片 -->
                      <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
                        <a-list-item  v-if="tabKey==''||tabKey==item.type" slot="renderItem" slot-scope="item, index" key="item.title">
                          <a-row>
                            <a-col :span='12'>
                              <div class="storage-img">
                                <img v-lazy="item.imgUrl">
                              </div>
                              <div class="storage-img-detail" style="margin-top: 20px">
                                    <a slot="title">
                                      {{item.title}}
                                    </a>
                                    <p>网点面积：{{item.measure}}</p>
                                    <p>出租价格：{{item.rentalrates}}</p>
                                    <p class="wy-text-nowrap">网点地址：{{item.address}}</p> 
                               </div>
                            </a-col>
                            <a-col :span='8'>
                                <div class="storage-company">
                                    <a slot="title">
                                      <span class="wy-font-18">{{item.company}}</span>
                                      <i class="recomend">推荐</i>
                                    </a>
                                    <div class="useStar">
                                          <span> 用户星级</span>
                                          <a-rate :defaultValue="2.5" disabled allowHalf />
                                          <div class="attestaion">已认证</div>
                                    </div>
                                 </div>
                            </a-col>
                            <a-col :span='4' class=" wy-p-l-15">
                                <a-button v-if="loggedIn" class='wy-m-b-15 wy-m-t--10' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                                <router-link v-if="!loggedIn" to="/login"><a-button  class='wy-m-b-15 wy-m-t--10' type="primary">立即沟通</a-button></router-link>
                                <router-link class="wy-m-b-15" :to="{path: '/info/storage/02',query:{ids: '02',id:`${item.id}`}}">
                                    <a-button>查看详情</a-button>
                                </router-link>
                                <p class="v-box-time">{{item.dataTime}}</p>
                            </a-col>
                          </a-row>
                        </a-list-item>
                      </a-list>  
                </div>

           
         
        </a-tab-pane>
      </a-tabs>
          </div>

        <!-- 弹框 -->
        <Elastic  ref='elastic'></Elastic>
         <!--地图Svg显示位置-->
        <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
   </div>
</template>
<script>
  import Elastic from './../../../components/dialog/Elastic'
  import { infoStorage } from './../../../utils/infoStorage'
  import AuthMixin from '~/mixins/auth'
  export default{
      mixins: [ AuthMixin ],
     components:{
       Elastic,

     },
     data(){
       return{
         type1: false,
         type0: true,
         type2: false,
            tabKey: '',
            // 起运地地址
            departureCar: '',
            names:'物流园区',
            destinationCar: '',
            listData: infoStorage,
            pagination: {
              pageSizeOptions: ['10', '20', '30', '40', '100'],
              defaultCurrent: 1,
              defaultPageSize: 10,
              showSizeChanger: true,
              total:6,
              showTotal: (total, range) => `共 ${total} 条记录`
        },
       }
     },
     methods:{
      // 列表切换
      tabChange(key){
        this.tabKey = key;
      },
      changeTab(key){
        if(key == 1){
          this.names = '物流仓储'
          this.type1 = true,
          this.type0 = false,
          this.type2 = false

        }else if(key == 2){
          this.type2 = true
          this.type1 = false
          this.type0 = false
          this.names = '物流网点'
        }
      },
      elasticShowModal(id){
        this.$refs.elastic.showModal(id);
      },
      mapSvgCall (d) {
        this[d.name] = d.city;
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
     }
  }
</script>
<style lang="scss">
 @import "./../../../assets/css/info/storage.scss";
 .storang{
   .ant-select-selection--single{
     height: 40px !important;
     line-height: 40px;
     .ant-select-selection__rendered{
       line-height: 40px !important;
     }
     .ant-select-selection-selected-value{
       line-height: 40px;
     }
   }
 }
 .storage-list {
   margin-top: 15px;
   .storage-list-title {
         width:100%;
         height:40px;
         background: #F7F7F7;
         border-bottom: 1px solid #D8D8D8;
         ul {
            overflow:hidden;
            margin:0;
            li{
               float:left;
               text-align: center;
               line-height: 40px;
               font-size: 16px;
               font-weight: 400;
               color: #333333;
            }
             li:first-child{
               width: 40%;
               border-right: 1px solid #EFEFEF
            }
            li:nth-child(2){
               width: 38%;
               border-right: 1px solid #EFEFEF;
            }
            li:last-child{
               width: 22%;
              
            }
         }

   }

 }
</style>